<template>
  <div class="statistics-personnel-container">
    <p class="common-list-bread">人员管理</p>
    <div class="common-query-box">
      <el-form :inline="true" :model="queryForm" labelWidth="90px">
        <el-form-item label="用户名称：">
          <el-input
            v-model="taskName"
            placeholder="请输入"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="姓名：">
          <el-input
            v-model="taskName"
            placeholder="请输入"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="部门：">
          <el-select
            v-model="queryForm.modelType"
            placeholder="请选择"
            clearable
            filterable
            :popper-append-to-body="false"
          >
            <!-- <el-option label="全部" :value=null></el-option> -->
            <el-option
              v-for="typeValue in departmentList"
              :key="typeValue.id"
              :label="typeValue.name"
              :value="typeValue.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属用户组：">
          <el-select
            v-model="queryForm.modelType"
            clearable
            placeholder="请选择"
            filterable
            :popper-append-to-body="false"
          >
            <!-- <el-option label="全部" :value=null></el-option> -->
            <el-option
              v-for="typeValue in permissionList"
              :key="typeValue.id"
              :label="typeValue.name"
              :value="typeValue.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            class="common-btn-primary left"
            size="small"
            @click="asyncGetTableData"
            >查询</el-button
          >
          <el-button class="common-btn-solid" size="small" @click="onClickRest"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="common-table-box">
      <div class="common-table-btn-box">
        <el-button class="common-btn-primary" size="small" @click="onclickAdd"
          >添加用户</el-button
        >
      </div>
      <el-table
        :data="tableData"
        border
        stripe
        :row-class-name="tableRowClassName"
        :span-method="arraySpanMethod"
      >
        <el-table-column
          label="名称"
          prop="name"
          width="130"
          align="left"
        ></el-table-column
        ><!-- width="110"  -->

        <el-table-column :label="item.y+'年'" v-for="(item, idx) in data" :key="idx">
          <el-table-column :label="item.m">
            <el-table-column
              v-for="(obj, index) in item.days"
              :key="index"
              :label="obj.d"
              min-width="30"
            >
              <template slot-scope="scope">
                <span
                  v-for="(info, infoIdx) in scope.row.checked"
                  :key="infoIdx"
                >
                  <span v-if="obj.desc == info">对应上了</span>
                </span>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table-column>

        <!-- <el-table-column :label="item.d"  prop="batchNo" align="center" v-for="(item,idx) in data" :key="idx"></el-table-column>

         <el-table-column :label="item.d"  prop="batchNo" align="center" v-for="(item,idx) in data" :key="idx"></el-table-column> --><!-- width="110"  -->
        <!-- <el-table-column prop="alias" label="用户名" min-width="100" align="left">
        </el-table-column>
        <el-table-column prop="alias" label="姓名" min-width="100" align="center">
        </el-table-column>
        <el-table-column prop="alias" label="部门" min-width="100" align="left">
        </el-table-column>
        <el-table-column prop="alias" label="所属用户组" min-width="100" align="center">
        </el-table-column>
        <el-table-column prop="alias" label="登录时间" min-width="100" align="left">
        </el-table-column> -->
        <!-- <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button v-has="'APM_edit'" class="common-btn-text" @click="onClickEdit(scope.row.id)"><i class="icon-ali-bianji"></i>编辑</el-button>
            <el-button v-has="'APM_delete'" class="common-btn-text common-table-delete" @click="onClickDelete(scope.row.id)">
              <i class="icon-ali-shanchu"></i>删除
            </el-button>
          </template>
        </el-table-column> -->
      </el-table>
      <el-pagination
        background
        @size-change="pageSizeChange"
        @current-change="currentPageChange"
        :current-page="currentPage"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- <div v-if="isDialogVisible">
      <UserInfoDialog
        :infoType="infoType"
        :userId="userId"
        :isDialogVisible="isDialogVisible"
        @cancel="onClickCancelSave"
        @success="onClickAddSaveData"
      ></UserInfoDialog>
    </div> -->
    <div id="main" style="height:400px"></div>
  </div>
</template>

<script>
// import watchScroll from 'utils/watchScroll'
// import UserInfoDialog from 'components/UserInfoDialog.vue'



// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入柱状图
// require('echarts/lib/chart/bar');
// 引入饼状图
require('echarts/lib/chart/pie');
// 引入提示框和标题组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');

var option = {
      title: {
        text: '某站点用户访问来源',
        subtext: 'W3Cschool',
        left: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      legend: {
        orient: 'vertical',
        left: 'left',
        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
      },
      series: [
        {
          name: '访问来源',
          type: 'pie',
          radius: '55%',
          center: ['50%', '60%'],
          data: [
            { value: 335, name: '直接访问' },
            { value: 310, name: '邮件营销' },
            { value: 234, name: '联盟广告' },
            { value: 135, name: '视频广告' },
            { value: 1548, name: '搜索引擎' }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);




export default {
  // components: {
  //   UserInfoDialog
  // },
  data() {
    return {
      loading: false,
      currentPage: 1,
      pageSize: 100,
      total: 0,
      queryForm: {
        machineType: null, //航空器类型
        modelType: null, //机型
      },
      departmentList: [], //所属部门集合
      permissionList: [], //所属用户组 
      dataTime:[
        {
          y: 2020,
          m: 10,
          d: 29,
          desc: "2020-10-29"
        },
        {
          y: 2020,
          m: 10,
          d: 30,
          desc: "2020-10-30"
        },
        {
          y: 2020,
          m: 10,
          d: 31,
          desc: "2020-10-31"
        },
        {
          y: 2020,
          m: 11,
          d: 1,
          desc: "2020-11-01"
        },
        {
          y: 2020,
          m: 11,
          d: 2,
          desc: "2020-11-02"
        },
        {
          y: 2020,
          m: 11,
          d: 3,
          desc: "2020-11-03"
        },
        {
          y: 2020,
          m: 11,
          d: 4,
          desc: "2020-11-04"
        },
      ],
      data: [
        /* {
          y: 2020,
          m: 10,
          days: [
            {
              d: "29",
              desc: "2020-10-29",
            },
            {
              d: "30",
              desc: "2020-10-30",
            },
            {
              d: "31",
              desc: "2020-10-31",
            },
          ],
        },
        {
          y: 2020,
          m: 11,
          days: [
            {
              d: "01",
              desc: "2020-11-01",
            },
            {
              d: "02",
              desc: "2020-11-02",
            },
            {
              d: "03",
              desc: "2020-11-03",
            },
            {
              d: "04",
              desc: "2020-11-04",
            }, 
          ],
        },*/
      ],
      tableData: [
        {
          name: "haha",
          checked: ["2020-10-31", "2020-11-02"],
        },
        {
          name: "帅哥",
          checked: [],
        },
        {
          name: "帅哥1",
          checked: ["2020-10-29", "2020-11-03"],
        },
        {
          name: "帅哥2",
          checked: ["2020-10-29","2020-10-30","2020-10-31", "2020-11-01", "2020-11-02", "2020-11-03", "2020-11-04"],
        },
        {
          name: "帅哥3",
          checked: ["2020-10-29","2020-10-30","2020-10-31", "2020-11-01", "2020-11-02", "2020-11-03", "2020-11-04"],
        },
        {
          name: "帅哥4",
          checked: ["2020-10-30","2020-10-31", "2020-11-01", "2020-11-02", "2020-11-03"],
        },
        {
          name: "帅哥5",
          checked: ["2020-10-29","2020-10-30", "2020-11-02", "2020-11-03", "2020-11-04"],
        },
        {
          name: "帅哥6",
          checked: [ "2020-11-02", "2020-11-03", "2020-11-04"],
        },
      ], //表格数据
      taskName: "", //用户名称

      infoType: 3, //1->新增 2->编辑 3->修改基础信息  用户入口
      userId: "",
      isDialogVisible: false,
    };
  },
  created() {
    // this.getQueryParams();
    /* this.asyncGetTableData();
      this.asyncGetDepartmentList();
      this.asyncGetPermissionList(); */
      
      this.data = this.dateList();
  },
  mounted() {
    /*  this.$nextTick(() => {
        document.querySelector('.M_content').addEventListener('scroll', watchScroll);
        window.addEventListener('resize', watchScroll);
      }); */
  },
  methods: {
    //处理后台的时间转换结构
    dateList(){
      let obj={};
      let info={};
      let dateArr=[];
      this.dataTime.forEach((item,index) =>{
        let ym = item.y+''+item.m;
        if(obj[ym]){
          info.days.push({d:item.d,desc:item.desc});
          if(index == this.dataTime.length-1) {
           dateArr.push(info);
          }
        } else {
          if(info && info.y){
           dateArr.push(info);
           console.log(info);
           info = {};
          }
          obj[ym] = ym;
           info.y = item.y;
           info.m = item.m;
           info.days = [{d:item.d,desc:item.desc}];
           console.log('这是下标'+index);
           console.log(info);
        }
      })
      console.log(dateArr)
      return dateArr;
    },
    tableRowClassName({ row, rowIndex }) {
      if (row.name == "帅哥") {
        return "warning-row";
      }
      return "";
    },
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (row.name == "帅哥") {
        // return [1, 2];
        return [1, 8];
      }
      //         if (rowIndex % 2 === 0) {
      //         console.log(rowIndex)
      //         console.log(row)
      //           return [1,5];
      // //           if (columnIndex === 0) {
      // //             return [1, 2];

      // //           } else  {
      // //             return [0, 0];
      // //           }
      //         }
    },

    //获取列表数据???
    asyncGetTableData() {
      this.loading = true;
      this.$axios
        .get("/aerocraft/queryAerocraftModel", {
          params: {
            pageSize: this.pageSize,
            pageNum: this.currentPage,
            id: this.queryForm.modelType,
            aerocraftTypeId: this.queryForm.machineType,
          },
        })
        .then((res) => {
          this.loading = false;
          if (res.data.code === 200) {
            this.tableData = [];
            this.total = res.data.data.total;
          } else {
            this.$message.error(res.data.msg);
          }
        });
    },
    //重置筛选数据
    onClickRest() {
      this.pageSize = 10;
      this.currentPage = 1;
    },
    //获取部门下拉框数据???
    asyncGetDepartmentList() {
      this.$axios.get("/aerocraft/listAllAerocraftType").then((res) => {
        if (res.data.code === 200) {
          this.departmentList = [...res.data.data];
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    //获取所有分组下拉列表
    asyncGetPermissionList() {
      this.$axios.get("/experimentGroup/getExperimentGroupList").then((res) => {
        if (res.data.code === 200) {
          this.permissionList = [...res.data.data];
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    //用户信息--弹框交互
    onClickCancelSave() {
      this.isDialogVisible = false;
    },
    //保存用户信息
    onClickAddSaveData() {
      this.isDialogVisible = false;
    },
    //点击添加
    onclickAdd() {
      this.infoType = 1;
      this.isDialogVisible = true;
    },
    //编辑
    onClickEdit(id) {
      this.infoType = 2;
      this.userId = id;
      this.isDialogVisible = true;
    },
    //删除???
    onClickDelete(id) {
      this.$confirm("确认删除吗？", "删除确认", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        showClose: false,
        type: "warning",
        center: true,
        customClass: "common-confirm-box",
        confirmButtonClass: "common-btn-primary",
        cancelButtonClass: "common-btn-text",
      }).then(() => {
        this.$axios.get("/user/deleteUser?id=" + id).then((res) => {
          if (res.data.code === 200) {
            this.asyncGetTableData();
          } else {
            this.$message.error(res.data.msg);
          }
        });
      });
    },
    pageSizeChange(val) {
      this.pageSize = val;
      this.asyncGetTableData();
    },
    currentPageChange(val) {
      this.currentPage = val;
      this.asyncGetTableData();
    },
  },
};
</script>
<style scoped>
.left {
  margin-left: 15px;
}

.statistics-personnel-container .el-table >>> .warning-row,
.statistics-personnel-container .el-table--striped  >>> .warning-row  td {
  background: oldlace!important;
}
.statistics-personnel-container .el-table >>> .warning-row  td,
.statistics-personnel-container .el-table--striped  >>> .warning-row  td {
   /*  padding: 0;
    height: 30px;
    line-height: 30px; */
}
.statistics-personnel-container .el-table  >>> thead.is-group th {
  background: #fff;
}
.statistics-personnel-container .el-table  >>>  thead th {
   padding: 5px 0;
}

</style>
<style>
/* .el-table td, .el-table th {
   padding:0;
} */
</style>